<template>
  <view class="empty-container">
    <image class="empty-icon" :src="getSrc" mode="scaleToFill" />
    <view class="text">{{ text }}</view>
  </view>
</template>

<script lang="ts" setup>
  import { propTypes } from '@/utils/propTypes';
  import { computed, ref, type PropType } from 'vue';

  type ImageType = 'default' | 'noPermission';

  // 统一缺省组件
  const props = defineProps({
    text: propTypes.string.def('暂无内容'),
    type: String as PropType<ImageType>,
  });

  const getSrc = computed(() => {
    switch (props.type) {
      case 'noPermission':
        return 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/no-permission-empty-icon.png';

      default:
        return 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/obs/20220419/d8f4de7024314184ac107a990f86088e.png?x-image-process=image/quality,q_50';
    }
  });
</script>

<style lang="scss" scoped>
  .empty-container {
    text-align: center;
    margin: 60rpx 0;
    .empty-icon {
      width: 374rpx;
      height: 288rpx;
      margin-bottom: 10rpx;
    }
    .text {
      color: #999;
      font-size: 30rpx;
      font-weight: 500;
    }
  }
</style>
